<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1 div,#div2 div {
				width: 200px;
				height: 200px;
				border: 1px #000 solid;
				display: none;
			}
			
			.active {
				background: red;
			}
		</style>
		<script>
			window.onload = function() {
				var t1 = new Tab("div1");
				t1.init();
			}

			function Tab(id) {
				this.oParent = document.getElementById(id);
				this.aInput = this.oParent.getElementsByTagName("input");
				this.aDiv = this.oParent.getElementsByTagName("div");
				this.iNow = 0;
			}

			Tab.prototype.init = function() {
				var This = this;
				for(var i = 0; i < this.aInput.length; i++) {
					this.aInput[i].index = i;
					this.aInput[i].onclick = function() {
						This.change(this);
					}
				}
			}

			Tab.prototype.change = function(obj) {
				for(var i = 0; i < this.aInput.length; i++) {
					this.aInput[i].className = "";
					this.aDiv[i].style.display = "none";
				}
				obj.className = "active";
				this.aDiv[obj.index].style.display = "block";
			}
		</script>
	</head>

	<body>
		<div id="div1">
			<input class="active" type="button" value="1">
			<input type="button" value="2">
			<input type="button" value="3">
			<div style="display:block">11111</div>
			<div>22222</div>
			<div>33333</div>
		</div>
	</body>

</html>

<body>